import React, { Component } from 'react';
import { toJS } from 'mobx';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Form, RouteLayout } from 'weaver-mobile-page';
import { Modal, ActivityIndicator, List, Result, Icon, Tools } from 'weaver-mobile';
const ButtonGroup = RouteLayout.ButtonGroup;
const alert = Modal.alert;
const getLabel = Tools.getLabel;
@inject('chanceFormStore')
@withRouter
@observer
export default class ChanceForm extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    const { chanceFormStore, match, params } = this.props;
    let ps;
    if (params) {
      ps = params;
    } else {
      ps = match.params;
    }
    chanceFormStore.doNew(this, ps);
  }

  componentDidMount() {
    const { chanceFormStore } = this.props;
    chanceFormStore.doInit();
  }

  componentWillUnmount() {
    const { chanceFormStore } = this.props;
    chanceFormStore.doClear();
  }

  render() {
    const store = this.props.chanceFormStore;
    const { initResponsed, initSuccessed, initFailedMsg, buttonProps } = store;
    let buttonGroupData = [];
    buttonGroupData.push({
      key: 'clear',
      text: getLabel('201', '取消'),
      onClick: () => alert('', getLabel('390915', '确定要离开吗?'), [
        { text: getLabel('201', '取消'), onPress: () => { } },
        { text: getLabel('83446', '确定'), onPress: () => this.props.history.go(-1) },
      ])
    });
    buttonGroupData.push({
      key: 'submit',
      text: getLabel('615', '提交'),
      onClick: () => this.doSave(),
      type: 'primary',
      disabled: buttonProps.disabled,
      loading: buttonProps.loading
    });
    if (initResponsed) {
      if (initSuccessed) {
        const { form } = store;
        return (
          <div className={"crm-form-main"}>
            <div className="crm-form-content">
              {/* <Form store={form} /> */}

              <Form style={{ height: '100%' }} >
                <List>
                  {this.getFields()}
                </List>
              </Form>
            </div>
            <ButtonGroup data={buttonGroupData} />
          </div>
        );
      } else {
        return (
          <div>
            <Result
              img={<Icon type="cross-circle-o" className="crm_commerce_initFailedMsg" style={{ fill: '#F13642' }} />}
              title=""
              message={initFailedMsg}
            />
          </div>);
      }
    } else {
      return <div className={"crm-bg-loading"}>
        <ActivityIndicator
          text="Loading..."
        />
      </div>;
    }
  }

  doSave() {
    const { chanceFormStore } = this.props;
    chanceFormStore.doSave();
  }

  getFields = () => {
    let { doChangeFormCondition, form } = this.props.chanceFormStore;
    const { conditioninfo, isInit } = form;
    
    const groups = [];
    if (isInit) {
      conditioninfo.forEach((group) => {
        const fields = [];
        group.items.forEach((field) => {
          if (field.domkey.join('_') === 'customerid') {
            if (form.formParams.customerid) {
              doChangeFormCondition('comefromid', form.formParams.customerid);
            }
          }
          fields.push(<Form.Item
            key={field.domkey.join('_')}
            form={form}
            fieldConfig={field}
            onChange={form.onChange}
          />);
        });
        fields && groups.push(
          // 分组
          <div className='wm-form-group' key={group.title}>
            <div className='wm-form-title' onClick={() => this.handldTogggle(group.title, !group.show)}>
              {group.title}
              <Icon className="am-icon" type={group.show ? 'up' : 'down'} />
            </div>
            <div className={`wm-form-list-wrap ${group.show ? 'show' : 'hide'}`}>
              {fields}
            </div>
          </div>
        )
      });
    }
    return groups;
  }
  handldTogggle = (...arg) => {
    const { groupToggle } = this.props.chanceFormStore;
    groupToggle(...arg);
  }
}